<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>

<head>
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="format-detection" content="telephone=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <link href="/static/admin-page/css/bksystem.css" rel="stylesheet" type="text/css"/>
    <link href="/static/admin-page/font/iconfont.css" rel="stylesheet" type="text/css"/>
    <link href="/static/admin-page/css/module.css" rel="stylesheet" type="text/css"/>
    <link href="/static/admin-page/css/pages.css" rel="stylesheet" type="text/css"/>
    <title>便签</title>
    <script src="/static/admin-page/js/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="/static/admin-page/js/jquery.cookie.js" type="text/javascript"></script>
    <script type="text/javascript" src="/static/admin-page/js/layer/layer.js"></script>
    <script src="/static/admin-page/js/jquery.nicescroll.js" type="text/javascript"></script>
    <script src="/static/admin-page/js/HUpages.js" type="text/javascript"></script>
</head>

<body id="pagestyle" class="backgrounddd">
<div class="bk-con-message message-section" id="iframe_box">
    <div class="box-module height100b margin0">
        <div class="box-title">个人便签</div>
        <div class="box-content  padding15  notesstyle">
            <div class="Prompt">提示：添加便签后，该便签内容保存在本地，保存期限可以自定义，也可以自己删除,最多可以添加十条</div>
            <div class="ptb15">
                <button type="button" class="btn add_Upload bg-deep-blue padding10" id="addNotes"><i
                        class="iconfont"></i>添加便签
                </button>
            </div>
            <div class="noteslist" id="noteslist">
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script>
    $(function () {
        $("#pagestyle").Hupage({
            slide: '#breadcrumb',
            scrollbar: function (e) {
                e.niceScroll({
                    cursorcolor: "#dddddd",
                    cursoropacitymax: 1,
                    touchbehavior: false,
                    cursorwidth: "3px",
                    cursorborder: "0",
                    cursorborderradius: "3px",
                });
            },
            expand: function (thisBox, settings) {
                settings.scrollbar(
                    $(".box-content").css({height: $(window).height() - $('.box-title').outerHeight() - 30})
                );
            }
        })
    });
    $(document).ready(function () {
        var spotMax = 11;
        if ($('div.notescontent').size() >= spotMax) {
            $(obj).hide();
        }
        $("#addNotes").on('click', function () {
            var id = '';
            var cid = '';
            $('.notescontent').each(function (i) {
                var cid = $(this).attr('id', "Notes" + i);
                var id = $(this).attr('data-id', +i);
                ;
            });
            addSpot(this, spotMax, cid, id);
        });

        function p(s) {
            return s < 10 ? '0' + s : s;
        };
        var myDate = new Date();
        //获取当前年
        var year = myDate.getFullYear();
        //获取当前月
        var month = myDate.getMonth() + 1;
        //获取当前日
        var date = myDate.getDate();
        var h = myDate.getHours(); //获取当前小时数(0-23)
        var m = myDate.getMinutes(); //获取当前分钟数(0-59)
        var s = myDate.getSeconds();
        var now = year + '-' + p(month) + "-" + p(date) + " " + p(h) + ':' + p(m) + ":" + p(s);

        function addSpot(obj, sm, cid, id) {
            noteshtml(cid, id);
            $(".colseNotes").click(function () {
                if ($('.notescontent').size() == 1) {
                    layer.msg('请至少保留一个便签', {
                        icon: 0,
                        time: 1000
                    });
                } else {
                    $(this).parents('.notesbox').remove();
                    $("body").find('.baglayer').remove();
                    $('#addNotes').show();
                }
            });
            if ($('.notescontent').size() >= sm) {
                $(obj).hide();
                layer.msg('已超过便签最大数量', {
                    icon: 0,
                    time: 1000
                });
                $("body").find('.notesbox').remove();
                $("body").find('.baglayer').remove();
            }
            $("#saveNotes").on('click', function () {
                var num = 0;
                var str = '';
                var addtitle = $('.addtext[name="tilte"]').val();
                var addcontent = $('.addtextarea').val();
                var adddate = now;
                $(".addtext[name='tilte'],.addtextarea").each(function (n) {
                    var $el = $(this);
                    if ($el.val() == "") {
                        layer.msg(str += "" + $el.attr("data-name") + "不能为空!", {
                            icon: 0,
                            time: 1000
                        });
                        num++;
                        return false;
                    }
                })
                if (num > 0) {
                    return false;
                } else {
                    Storage(addtitle, addcontent, adddate);
                    $(this).parents('.notesbox').remove();
                    $("body").find('.baglayer').remove();
                }
            });
        }

        function noteshtml(cid, id) {
            var str = "";
            str = "<div class='notescontent  box-module clearfix notesbox' id='" + cid + "' data-id='" + id + "'>" +
                "<div class='box-title'>添加便签 <i class='iconfont colseNotes'>&#xe70a</i></div><div class='box-content  padding15'><div class='cell-item'>" +
                "<label class='cell-left label_name'>便签标题:</label>" +
                "<div class='cell-right'><input name='tilte' type='text' data-name='标题' value='' class='addtext width100b'></div>" +
                "</div>" +
                "<div class='cell-item'>" +
                "<label class='cell-left label_name'>便签内容:</label>" +
                "<div class='cell-right'><textarea name='content' type='text' data-name='内容' value='' class='textarea addtextarea addtext width100b'></textarea></div>" +
                "</div>" +
                "</div><div class='box Notesbtn commonbtn'>" +
                "<button type='button' class='box-flex addNotes btnbox  bg-deep-blue' id='saveNotes'>添加便签</button>" +
                "<button type='button' class='box-flex colseNotes btnbox btn-danger' id='colseNotes'>取消</button>" +
                "</div></div> <div class='baglayer' id='colselayer'></div>";
            $("body").append(str);
        }

        function Storage(addtitle, addcontent, adddate) {
            if (window.localStorage.getItem("menu") != null) {
                var sessionArr = JSON.parse(window.localStorage.getItem("menu"));
            } else {
                var sessionArr = [];
            }
            var obj = {
                title: addtitle,
                content: addcontent,
                time: adddate
            };
            sessionArr.push(obj);
            var jsonStr = JSON.stringify(sessionArr);
            window.localStorage.setItem("menu", jsonStr);
            notesshow(addtitle, addcontent, adddate);
        }

        function localStorage() {
            var menu = JSON.parse(window.localStorage.getItem("menu"));
            for (var i = 0; i < menu.length; i++) {
                var title = menu[i].title;
                var content = menu[i].content;
                var time = menu[i].time;
                notesshow(title, content, time);
            }
        }

        if (window.localStorage.getItem("menu") != null) {
            localStorage();
        }

        function notesshow(title, content, time) {
            var html = "";
            html = "<div class='notescontent  clearfix'><div class='notes-detailed'>" +
                "<div class='box-title'><span class='name'>" + title + "<span> <i class='iconfont colseNotes' id='colseNotes' data-name='" + title + "'>&#xe601</i> <i class='iconfont modifyNotes' id='modifyNotes'>&#xe61a;</i></div><div class='box-content  padding15'>" +
                "<div class='detailedcontent'>" + content + "</div>" +
                "<div class='notestime'>" + time + "</div>" +
                "</div>" +
                "</div>";
            $('#noteslist').append(html);
        }

        $(".colseNotes").on('click', function () {
            var menu = JSON.parse(window.localStorage.getItem("menu"));
            if (menu != null) {
                for (var i = 0; i < menu.length; i++) {
                    if ($(this).attr('data-name') == menu[i].title) {
                        $(this).parents(".notescontent").remove();
                        menu.splice(i, 1);
                        window.localStorage.setItem("menu", JSON.stringify(menu));
                    }
                }
            }

        });
        //修改
        $('#modifyNotes').on('click', function () {
            var menu = JSON.parse(window.localStorage.getItem("menu"));


        });
    })
</script>